<template>
	<view>
		<view class="serach-box" >
			<uni-search-bar class="nav-box"  @blur="input" :focus="true"  :radius="100" cancelButton="none"/>
		</view>
		<!-- 搜索列表 -->
		<view class="listinfo" v-if="searchList.length!==0">
			<view class="list-item" 
			@click="gotogoodslist(item.goods_id)"
			v-for="(item,index) in searchList" :key="item.goods_id">
				<view class="list-item-desc">
					{{item.goods_name}}
				</view>
				<view class="list-item-right">	
				</view>
			</view>
		</view>
		<!-- 搜索历史 -->
		<view class="history" v-else>
			<view class="history-title">
				<text>搜索历史</text>
				<image src="../../static/other/delete.png" @click="deletehistory"></image>
			</view>
			<view class="history-list">
				<view class="history-list-item" v-for="(item,index) in historyList" 
				@click="gogoodslist(item)" :key= "index">
					{{item}}
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				timer:null,//定时器对象
				iptvalue:"",//表单输入值
				searchList:[],//搜索返回的数据列表
				historyList:[]//历史数据
			}
		},
		onLoad() {
		 this.historyList = JSON.parse(uni.getStorageSync("historyinfo") || '[]')
		
		},
		methods: {
			input(e){
				clearTimeout(this.timer)
				this.timer = setTimeout(()=>{
					this.iptvalue = e.value
					this.getserachlist()
				},1000)
			},
			// 获取搜索数据
			async	getserachlist(){
				if(this.iptvalue === ''){
					this.searchList = []
					return
				}
				const {data:res} = await uni.$http.get('/api/public/v1/goods/qsearch',{
					query: this.iptvalue
				})
				if(res.meta.status!=200)
				{
					return uni.$showMsg("数据请求失败")
				}else{
					this.historyList.unshift(this.iptvalue)
					let historylist = new Set(this.historyList)
					this.historyList = [...historylist]
					uni.setStorageSync('historyinfo',JSON.stringify(this.historyList))
					this.searchList = res.message
				}
				
			},
			gotogoodslist(id){
				uni.navigateTo({
					url:"/subpkg/goods_detail/goods_detail?goods_id="+id
				})
			},
			// 清空历史数据
			deletehistory(){
				this.historyList = []
				uni.clearStorageSync("historyinfo")
			},
			// 点击历史记录跳转到具体数据
			gogoodslist(name){
				uni.navigateTo({
					url:'/subpkg/goods_liat/goods_liat?query='+name
				})
			}
		}
	}
</script>

<style scoped>
.serach-box{
	width: 100%;
	height: 50px;
	display: flex;
	align-items: center;
	justify-content: center;
	background-color: red;
	position: sticky;
	top: 0;
	z-index: 999;

}
.nav-box{
	width: 80%;
}
.serarch-info{
	width: 90%;
	height: 30px;
	background-color: #FFFFFF;
	display: flex;
	align-items: center;
	border-radius: 10px
}
.serach-box image{
	width: 20px;
	height: 20px;
	margin-left: 2px;
	
}
.ipt{
	width: 80%;
	background-color: #FFFFFF;
	text-indent: 1em;
	font-size: 14px;
}
.list-item{
	display: flex;
	justify-content: space-between;
	padding: 10rpx;
	height: 36px;
	box-sizing: border-box;
	align-items: center;
	border-top: 1px solid #ccc ;
	
}
.list-item-desc{
	flex: 1;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
	font-size: 14px;
	line-height: 16px;
	height: 16px;
}
.list-item-right{
	width: 10px;
	height: 10px;
	
	border-top: 2px solid #333333;
	border-right: 2px solid #333333;
	transform: rotate(45deg);
	margin-right: 10px;
}
.history-title{
	margin: 5px;
	padding: 5px 0px;
	box-sizing: border-box;
	display: flex;
	justify-content: space-between;
	align-items: center;
	border-bottom: 1px solid #ccc;
}
.history-title image{
	width: 20px;
	height: 20px;
}
.history-title text{
	font-size: 14px;
	font-weight: 700;
}
.history-list{
	display: flex;
}
.history-list-item{
	height: 20px;
	line-height: 20px;
	background-color: #eee;
	margin: 5px 10px 0px;
	padding: 4px;
}
</style>
